<div class="panel panel-default detail-pane" ng-hide="previewMode || snapshotMode" ng-controller="DetailController">

  <div class="panel-heading clearfix">

    <h3 class="panel-title pull-left"
        ng-if="isPipelineRunning && selectedType !== pipelineConstant.LINK">{{'home.detailPane.monitoring' | translate}}:</h3>

    <h3 class="panel-title pull-left"
        ng-if="isPipelineRunning && selectedType === pipelineConstant.LINK">{{'home.detailPane.inspectingData' | translate}}:</h3>

    <div class="btn-group pull-left detail-name-dropdown">
      <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">
        <span>{{getDetailPaneLabel()}}</span>

        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation" class="dropdown-header"
            translate="global.form.pipeline">Pipeline</li>

        <li role="presentation">
          <a role="menuitem" tabindex="-1" href="#"
             ng-click="changeStageSelection({selectedObject: undefined, type: pipelineConstant.PIPELINE})">{{pipelineConfig.info.name}}</a>
        </li>

        <li role="presentation" class="divider"></li>

        <li role="presentation" class="dropdown-header"
            translate="global.form.stage">Stage</li>

        <li role="presentation"
            ng-repeat="stageInstance in pipelineConfig.stages">
          <a role="menuitem" tabindex="-1" href="#"
             ng-click="changeStageSelection({selectedObject: stageInstance, type: pipelineConstant.STAGE_INSTANCE})">{{stageInstance.uiInfo.label}}</a>
        </li>
      </ul>
    </div>


    <div class="pull-right size-toolbar">

      <div class="btn-group pull-left detail-settings-dropdown"
           ng-if="!$storage.dontShowRESTResponseMenu || isPipelineRunning">
        <a class="btn btn-link dropdown-toggle" data-toggle="dropdown"
           tooltip-placement="top"
           tooltip="{{'home.header.more' | translate}}"
           tooltip-popup-delay="500">
          <span class="fa fa-ellipsis-h fa-14x pointer"></span>
        </a>
        <ul class="dropdown-menu pull-right" role="menu">

          <li role="presentation" class="dropdown-header"
              ng-if="!$storage.dontShowRESTResponseMenu"
              translate="home.detailPane.restURL">REST URL</li>

          <li role="presentation" ng-if="isPipelineRunning && !$storage.dontShowRESTResponseMenu">
            <a role="menuitem" tabindex="-1" href="/rest/v1/pipeline/metrics" target="_blank">{{'home.detailPane.monitoringJSONData' | translate}}</a>
          </li>

          <li role="presentation" ng-if="isPipelineRunning && !$storage.dontShowRESTResponseMenu">
            <a role="menuitem" tabindex="-1" href="/rest/v1/pipeline/status" target="_blank">{{'home.detailPane.pipelineStatusJSONData' | translate}}</a>
          </li>

          <li role="presentation" ng-if="!$storage.dontShowRESTResponseMenu">
            <a role="menuitem" tabindex="-1" href="/rest/v1/pipeline-library/{{pipelineConfig.info.name}}" target="_blank">{{'home.detailPane.pipelineConfigJSONData' | translate}}</a>
          </li>

          <li role="presentation" ng-if="!$storage.dontShowRESTResponseMenu">
            <a role="menuitem" tabindex="-1" href="/rest/v1/pipeline-library/{{pipelineConfig.info.name}}/rules" target="_blank">{{'home.detailPane.pipelineRulesJSONData' | translate}}</a>
          </li>

          <li role="presentation" ng-if="!$storage.dontShowRESTResponseMenu">
            <a role="menuitem" tabindex="-1" href="/rest/v1/definitions" target="_blank">{{'home.detailPane.definitionsJSONData' | translate}}</a>
          </li>

          <li role="presentation" ng-if="isPipelineRunning"
              ng-if="!$storage.dontShowRESTResponseMenu"
              class="divider"></li>

          <li role="presentation" ng-if="isPipelineRunning">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="launchSettings()">{{'global.form.settings' | translate}}</a>
          </li>

        </ul>
      </div>

      <span class="fa fa-question-circle fa-14x pointer"
            tooltip-placement="top"
            tooltip="{{'global.form.help' | translate}}"
            tooltip-popup-delay="500"
            ng-click="launchHelp()"></span>

      <span class="glyphicon pointer"
            tooltip-placement="top"
            tooltip="{{!$storage.minimizeDetailPane ? 'global.form.minimizePane' : 'global.form.maximizePane' | translate}}"
            tooltip-popup-delay="1000"
            ng-hide="$storage.maximizeDetailPane"
            ng-class="{'glyphicon-minus' : !$storage.minimizeDetailPane , 'glyphicon-resize-full': $storage.minimizeDetailPane}"
            ng-click="onMinimizeDetailPane()"></span>

      <span class="glyphicon pointer"
            tooltip-placement="top"
            tooltip="{{!$storage.maximizeDetailPane ? 'global.form.maximizePane' : 'global.form.minimizePane' | translate}}"
            tooltip-popup-delay="1000"
            ng-hide="$storage.minimizeDetailPane"
            ng-class="{'glyphicon-fullscreen' : !$storage.maximizeDetailPane , 'glyphicon-resize-small': $storage.maximizeDetailPane}"
            ng-click="onMaximizeDetailPane()"></span>
    </div>

  </div>

  <div class="panel-body">
    <tabset class="detail-tabs-left tabs-left">
      <tab ng-repeat="tab in detailPaneTabs track by $index" active="tab.active" disabled="tab.disabled"
           select="onTabSelect(tab)">
        <tab-heading>  <!--tooltip-placement="right" tooltip="{{tab.label}}" -->
          <i class="fa fa-exclamation-triangle icon-danger"
             ng-show="showWarning(tab)"></i>

          <i class="{{tab.iconClass}}"
             ng-hide="showWarning(tab)"></i>

          <span>{{'home.detailPane.' + tab.name | translate}}</span>
        </tab-heading>
        <div ng-if="tab.active" ng-include="tab.template"></div>
      </tab>
    </tabset>
  </div>
</div>


<ng-include src="'app/home/detail/fieldSelectorModal.tpl.html'"></ng-include>